
/**
 * @author huang
 * Hint 提示框
 * el 元素选择器 string
 * msg 提示信息 string,
 * second 提示停留 number, 
 * bgc 背景颜色 css样式background值
 * 
* **/

class Hint {
    constructor(options) {
        let { el, msg, second, bgc } = options;
        this.el = document.querySelector(el);
        this.el.innerText = msg;
        this.bgc = bgc
        this.second = second ?? 2000;
        if (this.el.style.display !== 'block') {
            this.show();
        };
    }

    show() {
        requestAnimationFrame(this.showAnimation.bind(this));
        let timer = setTimeout(() => {
            this.hideFlow();
            clearTimeout(timer);
        }, this.second);
    }

    showAnimation() {
        this.el.style.display = 'block';
        if (this.bgc) {
            this.el.style.background = this.bgc;
        }
        this.el.style.animation = 'show 1s';
        this.el.style.animationFillMode = 'forwards';
    }

    hideAnimation() {
        this.el.style.animation = 'hide 1s';
    }

    hideFlow() {
        requestAnimationFrame(this.hideAnimation.bind(this));
        let timer = setTimeout(() => {
            this.el.innerText = '';
            this.el.style.display = 'none';
            this.el.style.background = '';
            clearTimeout(timer);
        }, 1000);
    }
};